<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 进度条 -->
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center"
					style="background-image:url(../../static/cloud_brush_danghang1.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.支付信息</text>
				</view>
				<view class="grace-flex-center"
					style="background-image:url(../../static/cloud_brush_danghang2.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.收款信息</text>
				</view>
			</view>

			<view
				style="margin: 31rpx auto;  width:702rpx;height:390rpx;box-shadow:0px 2rpx 6rpx 0px rgba(129,78,171,0.3);border-radius:20rpx;">
				<view style="width:702rpx;height:95rpx;background:rgba(255,255,255,1);">
					<text
						style="margin-left: 15rpx; line-height: 90rpx; font-size:36rpx;font-weight:bold;color:#1678FF;">收款信息|<text
							style="color: #FC5F00;margin-left: 15rpx;">R</text>eceivables <text
							style="color: #FC5F00;margin-left: 20rpx;">I</text>nformation</text>
				</view>

				<view class="grace-rows grace-flex-vcenter"
					style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);"
					@tap="showDialog1">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">收款账户:</text>
					<view class="grace-columns" style="text-align: center;">
						<view>
							<text
								style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{shoukuanname}}</text>
							<image src="../../static/jiantou.png"
								style="width: 15rpx;height: 25rpx;position: relative;left: 120rpx;"></image>
						</view>
						<view
							style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 13rpx;">
						</view>
					</view>
				</view>

				<view class="grace-rows grace-flex-vcenter"
					style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">消费地区:</text>
					<view class="grace-columns" style="text-align: center;" @tap="open1">
						<view>
							<text style="width: 300rpx;">{{cityText1}}</text>
							<image src="../../static/jiantou.png"
								style="width: 15rpx;height: 25rpx;position: relative;left: 30rpx;"></image>
						</view>
						<view
							style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 10rpx;">
						</view>
					</view>
				</view>

				<view class="grace-rows grace-flex-vcenter"
					style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);"
					@tap="showDialog2">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">到账金额:</text>
					<view class="grace-columns" style="text-align: center;">
						<view>
							<text>{{ money }}</text>
						</view>
						<view
							style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 13rpx;">
						</view>
					</view>
				</view>
			</view>

			<button @tap="submit"
				style="margin-top: 221rpx; width:500rpx;height:90rpx;background:#3187D5;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;"><text
					style="font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);">确认</text></button>
			<!-- 云刷记录按钮 -->
			<image @tap="record" src="../../static/yunshuajilu.png"
				style="width:170rpx;height: 170rpx;position: relative;margin-left: 550rpx;margin-top: 20rpx; "></image>

			<!-- 支付账户遮罩 -->
			<graceBottomDialog :show="show1" @closeDialog="closeDialog1">
				<view slot="btns">
					<view style="height: 80rpx;line-height: 80rpx;">
						<view class="grace-flex-center">
							<text style="font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">选择收款账户</text>
							<view style="position: relative;left: 230rpx;top: 5rpx;" @tap="closeDialog1">
								<image src="../../static/quxiao.png" style="width: 30rpx;height: 30rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view slot="content">
					<scroll-view class="grace-scroll-y" scroll-y style="height: 400rpx;">
						<view @tap="qiehuanshoukuan(item)" v-for="(item,index) in shoukuanzhanghu_list" :key="index"
							class="grace-rows grace-flex-vcenter"
							style="height: 80rpx;border-bottom: 2rpx solid #F7F7F7; ">
							<image :src="item.bankinfo.bank_icon_color"
								style="width: 38rpx;height: 38rpx;margin-left: 30rpx;"></image>
							<text
								style="margin-left: 25rpx; font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">{{item.name}}({{item.bc_bank_number.last}})</text>
						</view>
						<view @tap="Goto('/pages/add_savings_card/add_savings_card')"
							class="grace-rows grace-flex-vcenter" style="height: 80rpx;">
							<image src="../../static/tianjia.png"
								style="width: 38rpx;height: 38rpx;margin-left: 30rpx;"></image>
							<text
								style="margin-left: 25rpx; font-size:30rpx;font-weight:400;color:rgba(0,0,0,1);">添加储蓄卡</text>
						</view>
					</scroll-view>
				</view>
			</graceBottomDialog>



			<!-- 消费地区遮罩 -->
			<!-- 			<mpvue-city-picker
			:deepLength="deepLength"
			:themeColor="themeColor" 
			ref="mpvueCityPicker1" 
			:pickerValueDefault="cityPickerValueDefault1" 
			@onConfirm="onConfirm1"></mpvue-city-picker> -->


			<!-- 新地区选择 -->
			<graceAddressPicker :channel_id="channel_id" :show="show4" @confirm="confirm1" :level="level"
				@close="close1" cancelTColor="关闭"></graceAddressPicker>

			<!-- 验证码弹窗 -->
			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<!-- <text>请输入验证码</text> -->
					<text style="font-size: 26rpx;">验证码已发送至您手机</text></br>
					<input v-model="yanzhengma"
						style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx"
						placeholder="请输入验证码" />
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" :style="{background:button_color}"  @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<ourLoading active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	// 验证码
	import graceDialog from '../../graceUI/components/graceDialog.vue';

	import gracePage from "../../graceUI/components/gracePage.vue";
	// 遮罩层
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	// 地区选择
	// import mpvuePicker from '../../graceUI/threeComponents/mpvuePicker.vue';
	// import mpvueCityPicker from '../../graceUI/threeComponents/mpvueCityPicker.vue';
	// 新地区选择
	import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				coupon: 0,
				coupon_id: '',
				shoukuanname: '暂无收款账户',
				shoukuanzhanghu_list: [],
				show1: false,
				show2: false,
				show4: false,
				bc_id: '', //支付id
				channel_id: '', //通道id
				saving_id: '', //收款id
				pay_money: '', //要刷的钱
				money: '暂无到账金额', //收款的钱
				deepLength: 2,
				themeColor: '#007AFF', //颜色
				cityText1: "点击选择", //文本
				cityPickerValueDefault1: [1, 0],
				//记录全部信息用于表单提交
				city1: null,
				level: 2,
				c_code: 5101,
				// 验证码
				show3: false,
				yuliushouji: '',
				yanzhengma: '', //验证码
				order_num: '', //订单号
				loadings: false
			}
		},
		onLoad: function(opt) {
			console.log(opt);
			var vm = this
			vm.coupon = opt.coupons;
			vm.bc_id = opt.card_id
			vm.channel_id = opt.yewu_id
			vm.pay_money = opt.money
			// // 获取地区信息
			// vm.req.post(
			// vm.lochost+'/mytrunk/mycloudbrush/yun_consumption_address',
			// {c_code:5101},
			// {},
			// function(res){
			// 	console.log(res);
			// }
			// )

		},
		onShow: function() {
			this.amount()
			this.Collection()
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取到账金额
			amount() {
				var vm = this
				vm.myPost(
					'api/cloudbrush/get_arrival_amount', {
						card_id: vm.bc_id,
						money: vm.pay_money,
						yewu_id: vm.channel_id,
						coupons: vm.coupon
					},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							vm.money = res.data.repay_back
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 获取收款账户的储蓄卡数据列表
			Collection() {
				var vm = this
				vm.myPost(
					'api/cardapi/get_card_list', {
						type: '储蓄卡'
					},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							vm.shoukuanzhanghu_list = res.data;
							vm.qiehuanshoukuan(vm.shoukuanzhanghu_list[0]);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 跳转云刷记录页面事件
			record() {
				uni.navigateTo({
					url: '/pages/Cloud_brush/credit_card_record'
				})
			},
			// 显示验证码输入框
			showDialog3: function() {
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 云刷验证码输入框选择了确认
			confirm3: function() {
				if (this.yanzhengma === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					var vm = this;
					vm.loadings = true
					this.myPost(
						'api/cloudbrush/cloud_brush_confirm', {
							order_num: this.order_num,
							cms: this.yanzhengma,
						},
						function(res) {
							vm.loadings = false
							vm.closeDialog3();
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/Cloud_brush/credit_card_record'
									})
								}, 1000);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}
					)
				}

			},

			// 云刷确认按钮
			submit() {
				var vm = this;
				if (this.c_code === '' || this.card_id === '') {
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none'
					})
				} else {
					vm.loadings = true
					var obj = {
							yewu_id: vm.channel_id,
							card_id: vm.bc_id,
							saving_id: vm.saving_id,
							money: vm.pay_money,
							city_code: vm.c_code,
							coupons: vm.coupon,
						}
						// console.log(obj)
						// return
					vm.myPost(
						'api/cloudbrush/generate_cloud_brush', {
							yewu_id: vm.channel_id,
							card_id: vm.bc_id,
							saving_id: vm.saving_id,
							money: vm.pay_money,
							city_code: vm.c_code,
							coupons: vm.coupon,
						},
						function(res) {
							console.log(res);
							vm.loadings = false
							if (res.code == 200) {
								var is_need_SMS = res.data.verification;
								if (is_need_SMS === 0) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '/pages/Cloud_brush/cloud_brush1'
										})
									}, 1000);
									// 跳转去哪？
								} else if (is_need_SMS === 1) {
									vm.order_num = res.data.order_num;
									vm.yuliushouji = res.data.phone;
									vm.showDialog3();
								} else if (is_need_SMS === 2) {
									uni.redirectTo({
										url: '/pages/Cloud_brush/web_view?url=' + res.data.url
									})
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}

						}
					)
				}
			},
			// 更换收款账户
			qiehuanshoukuan(item) {
				this.saving_id = item.id
				this.shoukuanname = item.name + '(' + item.bc_bank_number.last + ')'
				this.closeDialog1()
			},
			showDialog1() {
				this.show1 = true;
			},
			closeDialog1() {
				this.show1 = false;
			},
			showDialog2() {
				this.show2 = true;
			},
			closeDialog2() {
				this.show2 = false;
			},
			// 新地区选择
			close1: function() {
				this.show4 = false;
			},
			open1: function() {
				this.show4 = true;
			},
			confirm1: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.c_code = e.codes[0];
				// console.log(this.c_code);
				this.cityText1 = e.names[0] + '-' + e.names[1];
				this.close1();
			},
			// cityPicker1 : function(){
			// 	this.$refs.mpvueCityPicker1.show();
			// },
			// onConfirm1(e) {
			// 	var cityText1  = e.label;
			// 	var cityValue1 = e.value;
			// 	var cityCode1  = e.cityCode;
			// 	console.log(cityText1, cityValue1, cityCode1);
			// 	this.cityText1 = cityText1;
			// 	this.cityPickerValueDefault1 = cityValue1;
			// 	this.city1 = e;
			// },
		},
		components: {
			graceDialog,
			gracePage,
			graceBottomDialog,
			// mpvuePicker,
			// mpvueCityPicker

			graceAddressPicker
		}
	}
</script>

<style>
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}
</style>
</style>
